學習目標

• 學會使用 <a> 標籤建立超連結
• 熟悉 href、target、title 等常見屬性
• 能正確插入圖片 <img>，理解 src、alt、width/height
• 分辨相對路徑與絕對路徑的差異
• 理解圖片與連結結合的常見應用

重點觀念（從文字跳到世界）

• 超連結是網頁的靈魂：<a> 讓靜態文字能夠互相串連，形成「網路」。
• 善用 alt 屬性：圖片無法顯示時，替代文字能告訴使用者內容，也有助於 SEO 與無障礙設計。
• 路徑差異：
  • 相對路徑（images/pic.png）：依照目前檔案位置去找
  • 絕對路徑（https://example.com/pic.png）：完整網址，不受檔案層級影響
• 圖片 ≠ 裝飾：若圖片承載資訊，務必加上語意的 alt。

超連結與圖片示範

  <!-- 基本超連結 -->
  <p>前往 <a href="https://developer.mozilla.org/" target="_blank" title="MDN">MDN</a> 學習更多。</p>

  <!-- 錨點連結 -->
  <p><a href="#section1">跳到段落 1</a></p>

  <!-- 插入圖片 -->
  <img src="images/cat.png" alt="一隻可愛的貓咪" width="200">

  <!-- 圖片超連結 -->
  <a href="https://www.google.com/">
    <img src="images/google.png" alt="Google Logo" width="150">
  </a>

常見錯誤與修正

• ❌ 忘記加 alt → ✅ 加上替代文字，提升可讀性與 SEO
• ❌ 使用空連結 href="#" → ✅ 提供實際目標或用 JS 處理事件
• ❌ 路徑混亂 → ✅ 建立 images/ 資料夾，維持結構清晰
• ❌ 在 <img> 用錯誤大小屬性 → ✅ 使用 width/height 或 CSS 控制，保持比例

今日小挑戰（可交付）

• [ ] 在頁面中建立一個指向外部網站的新分頁連結
• [ ] 嘗試建立一個錨點，點擊後能跳到頁面下方的段落
• [ ] 插入一張圖片，並正確加上 alt 屬性
• [ ] 做一個圖片超連結，點擊圖片能導向另一個網站
• [ ] 嘗試分別使用相對路徑與絕對路徑插入圖片

DAY 7 心得

今天學到的超連結與圖片，讓我體會到「網頁真正活起來」的感覺。前幾天練習的標題與段落，都還算是靜態的文字排版，而有了 <a> 之後，內容之間終於能互相串連，帶我從單一頁面走向整個世界。

圖片的部分也讓我重新思考：一張圖片不是只有「好看」，而是需要提供資訊。當我為 <img> 補上 alt 的時候，不只是提升了 SEO，也能讓看不見畫面的使用者理解內容。這其實就是「網頁對所有人都友善」的一個基礎。

另外，相對路徑與絕對路徑的練習，也讓我更清楚專案結構的重要性。當圖片數量越來越多，如果沒有好的資料夾規劃，很快就會亂掉。

今天的學習就像替網站安上了「眼睛」和「道路」，讓網頁能看、能走，也讓我對前端的理解更完整了一些。